<template>
	<view class="bigbox" v-for="(v,i) in commentArr" :key="i">
		<!-- 我的->评论 -->
		<view class="tan" >
			<view class="tu">
				<image :src="'../../../static/image-che/'+v.coachheadsrc" mode=""></image>
			</view>
			<view>
				<view class="one">{{v.coachcourse}}</view>
				<view class="two"><text>{{v.coachtime}}</text><text>{{v.coachname}}</text></view>
			</view>
		</view>
		<view class="fuwu">
			<view>教练服务</view>
			<view>❤❤❤❤❤</view>
		</view>
		<view class="sense">
			<view>训练感受</view>
			<view v-for="(v,i) in v.coachsense" :key="i" class="ganshou">{{v}}</view>
			<!-- <view class="ganshou">适合小白</view> -->
		</view>
		<view class="picture">
			<image  :src="'../../../static/image-che/'+v" v-for="(v,i) in v.coachimgsrc" :key="i"></image>
		
		</view>
		<view class="pinglun">{{v.coachcomment}}</view>
		
	</view>
	<view class="tijiao">
		<button size="mini" type="primary" @click="add">新增评论</button>
	</view>
</template>

<script>
	import {toRefs,reactive} from 'vue';
	import {onShow} from '@dcloudio/uni-app';
	import myRequest from '../../../utils/myRequest.js';
	import store from '../../../store/index.js';
	export default {
		setup(){
			let data=reactive({
				commentArr:[],
				add(){
					uni.navigateTo({
						url: '/pages/My/comment/pingjia'
					});
				}
			});
			onShow(function(){
				myRequest({
					url:'/getcoachcomment'
				}).then((res)=>{
					// console.log(res)
					data.commentArr=res.data.data
					store.commit('che/getCoachcommentArr',data.commentArr,{root:true})
					data.commentArr.forEach((item)=>{
						item.coachsense=JSON.parse(item.coachsense)
						item.coachimgsrc=JSON.parse(item.coachimgsrc)
					})
				})
			})
			return {...toRefs(data)}
		}
	}
	
</script>
<style lang="less" scoped>
	.bigbox{
		padding: 25rpx 40rpx 40rpx 40rpx;
		border-bottom: 1px solid rgb(242,242,242);
	}
	
.tan{
	display: flex;
	align-items: center;
	.tu{
		width: 180rpx;
		height: 150rpx;
		margin-right: 40rpx;
		image{
			width: 180rpx;
			height: 150rpx;
			border-radius: 20rpx;
		}
	}
}
.one{
	font-size: 30rpx;
	margin-bottom: 14rpx;
	font-weight: 700;
}
.two{
	font-size: 24rpx;
	margin-top: 14rpx;
	text:nth-child(1){
		margin-right: 20rpx;
	}
}
.fuwu{
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-radius: 20rpx;
	width: 670rpx;
	box-sizing: border-box;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	border: 1px solid rgb(228,228,228);
	view:nth-child(1){
		font-size: 28rpx;
		color: rgb(165,153,165);
		margin-right: 30rpx;
	}
	view:nth-child(2){
		color: red;
	}
}
.sense{
	display: flex;
	align-items: center;
	padding: 14rpx;
	border-radius: 20rpx;
	width: 670rpx;
	box-sizing: border-box;
	border: 1px solid rgb(228,228,228);
	margin-bottom: 20rpx;
	view:nth-child(1){
		font-size: 28rpx;
		color: rgb(165,153,165);
		margin-right: 30rpx;
	}
	.ganshou{
		font-size: 28rpx;
		padding: 10rpx 16rpx;
		border-radius: 10rpx;
		border: 1px solid rgb(52,120,247);
		color: rgb(52,120,247);
		box-sizing: border-box;
		margin-right: 16rpx;
	}
}
.picture{
	display: flex;
	// justify-content: space-between;
	margin-bottom: 20rpx;
	image{
		width: 200rpx;
		height: 180rpx;
		margin-right: 20rpx;
	}
}
.pinglun{
	color: rgb(165,153,165);
	font-size: 26rpx;
}
.tijiao{
	text-align: center;
	margin-top: 20rpx;
}
</style>
